<template>
    <div ref="chart" style="width: 100%; height: 400px;"></div>
  </template>
  
<script>
  import * as echarts from 'echarts';

  export default {
    props: {
      product: Object
    },
    mounted() {
      this.renderChart();
    },
    methods: {
      renderChart() {
        console.log(this.product);
        const chartDom = this.$refs.chart;
        const myChart = echarts.init(chartDom);
        const xAxisData = ['2024-05-01', '2024-05-02', '2024-05-03', '2024-05-04', '2024-05-05']; 
        const seriesData = [1, 1.2, 0.9, 1.5, 2.0]; 
        
        const option = {
          xAxis: {
            type: 'category',
            data: xAxisData
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: seriesData,
            type: 'line'
          }]
        };
        myChart.setOption(option);
      }
    }
  };
</script>
  